<template>
	<view class="">
		<!-- 分类选项卡 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
				@click="switchTab(index)">
				<text>{{ tab }}</text>
				<view class="tab-line" v-if="currentTab === index"></view>
			</view>
		</view>
		<view class="container">


			<!-- 搜索框 -->
			<view class="search-box">
				<view class="search-input">
					<text class="search-icon">🔍</text>
					<input type="text" placeholder="搜索收藏内容" v-model="searchText" @input="handleSearch" />
				</view>
			</view>

			<!-- 收藏列表 -->
			<scroll-view scroll-y class="collection-list" v-if="filteredCollections.length > 0">
				<view class="collection-item" v-for="(item, index) in filteredCollections" :key="index"
					@click="viewDetail(item)">
					<image class="item-image" :src="item.avatar" mode="aspectFill"></image>
					<view class="item-content">
						<text class="item-title">{{ item.name }}</text>
						<text
							class="item-desc">{{ item.department }}{{item.position ? '|' : ''}}{{ item.position }}</text>
						<view class="item-footer">
							<text class="item-date">{{ item.createTime }}</text>
							<view class="item-actions">
								<text class="iconfont action-icon delete" @click.stop="deleteItem(item)">&#xe615;</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<image src="/static/empty-state.png" class="empty-image"></image>
				<text class="empty-text">暂无收藏内容</text>
				<button class="browse-btn" @click="goBrowse">去浏览</button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 选项卡数据
				tabs: ['全部', '医生', '文章'],
				currentTab: 0,
				searchText: '',
				globaApi: '',
				doctors: [],
				articles: [],
				// {
				// 	id: 1,
				// 	type: '医生',
				// 	title: '张医生',
				// 	description: '心血管科 | 主任医师',
				// 	image: '/static/doctor1.png',
				// 	date: '2025-03-15'
				// }
				// articles: [{
				// 	id: 2,
				// 	type: '文章',
				// 	name: '高血压患者的日常护理指南',
				// 	description: '本文介绍了高血压患者在日常生活中应注意的事项...',
				// 	avatar: '/static/article1.png',
				// 	date: '2025-03-10'
				// }],
				// 收藏数据
				collections: []
			}
		},
		computed: {
			// 过滤后的收藏列表
			filteredCollections() {
				return this.collections.filter(item => {
					// 根据选项卡筛选
					const tabFilter = this.currentTab === 0 || item.type === this.tabs[this.currentTab];
					// 根据搜索文本筛选
					const searchFilter = this.searchText === '' ||
						item.title.includes(this.searchText) ||
						item.description.includes(this.searchText);

					return tabFilter && searchFilter;
				});
			}
		},
		onLoad() {
			this.globaApi = getApp().globalData.baseUrl
			this.getDoctors()
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 切换选项卡
			switchTab(index) {
				this.currentTab = index;
			},
			// 处理搜索
			handleSearch() {
				// 搜索逻辑已在计算属性中实现
			},
			// 查看详情
			viewDetail(item) {
				console.log('查看详情:', item.title);
				// 根据类型跳转到不同页面
				let url = '';
				if (item.name.length > 3) {
					url = `/pages/message/detail?id=${item.id}`;
				} else {
					url = `/pages/index/doctor?id=${item.doctorId}&name=${item.name}&avatar=${item.avatar}`;
				}
				uni.navigateTo({
					url: url
				})
			},
			// 分享项目
			shareItem(item) {
				console.log('分享:', item.title);
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
			},
			// 删除项目
			deleteItem(item) {
				console.log('删除:', item.title);
				uni.showModal({
					title: '确认删除',
					content: `确定要删除"${item.title}"吗？`,
					success: (res) => {
						if (res.confirm) {
							// 删除项目逻辑
							this.collections = this.collections.filter(col => col.id !== item.id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			// 去浏览
			goBrowse() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			getArticles() {
				// 	uni.request({
				// 		url: `${this.globaApi}/auth/send-code`,
				// 		method:'POST',
				// 		header: {
				// 			'Content-Type': 'application/x-www-form-urlencoded'
				// 		},
				// 		success: (res) => {
				// 			if (res.data.code === 200) {
				// 				console.log('查询成功');
				// 				this.popularDoctors = res.data.data
				// 			} else {
				// 				uni.showToast({
				// 					title: res.data.message || '获取医生信息失败',
				// 					icon: 'none'
				// 				});
				// 			}
				// 		},
				// 		fail: () => {
				// 			uni.hideLoading();
				// 			uni.showToast({
				// 				title: '网络错误，请稍后重试',
				// 				icon: 'none'
				// 			});
				// 		}
				// 	})
			},
			async getDoctors() {
				uni.request({
					url: `${this.globaApi}/collect/getCollectByUserId`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code === 200) {
							console.log('查询成功');
							this.doctors = res.data.data
							this.collections = [...this.doctors, ...this.articles]
						} else {
							uni.showToast({
								title: res.data.message || '获取信息失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style>
	/* 容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 标题栏样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.placeholder {
		width: 60rpx;
	}

	/* 选项卡样式 */
	.tabs {
		display: flex;
		height: 80rpx;
		width: 100%;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
		position: sticky;
		/* 新增属性，实现吸顶效果 */
		top: 0;
		/* 新增属性，固定在顶部 */
		z-index: 1;
		/* 新增属性，确保在其他内容之上 */
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tab-item text {
		font-size: 28rpx;
		color: #666666;
	}

	.tab-item.active text {
		color: #2979ff;
		font-weight: bold;
	}

	.tab-line {
		position: absolute;
		bottom: 0;
		width: 60rpx;
		height: 4rpx;
		background-color: #2979ff;
		border-radius: 2rpx;
	}

	/* 搜索框样式 */
	.search-box {
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.search-input {
		display: flex;
		align-items: center;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 35rpx;
		padding: 0 30rpx;
	}

	.search-icon {
		margin-right: 10rpx;
		font-size: 28rpx;
	}

	.search-input input {
		flex: 1;
		height: 70rpx;
		font-size: 28rpx;
	}

	/* 收藏列表样式 */
	.collection-list {
		flex: 1;
		background-color: #ffffff;
	}

	.collection-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.item-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.item-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.item-desc {
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-date {
		font-size: 24rpx;
		color: #999999;
	}

	.item-actions {
		display: flex;
	}

	.action-icon {
		margin-left: 30rpx;
		font-size: 36rpx;
		color: #999999;
	}

	.action-icon.share {
		color: #2979ff;
	}

	.action-icon.delete {
		color: #ff5a5f;
	}

	/* 空状态样式 */
	.empty-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 30rpx;
	}

	.browse-btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		background-color: #2979ff;
		border-radius: 35rpx;
	}

	.action-icon {
		margin-left: 30rpx;
		font-size: 36rpx;
		color: #999999;
	}


	.action-icon.delete {
		color: #ff5a5f;
	}
</style>